<template>
       <div>
        <div v-if="client == '直控门店'">
                <el-table :data="tableData" style="width: 100%"   cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="终端类型"  />
    <el-table-column prop="storeQuantity" label="门店数量" />
    <el-table-column prop="totalAmount" label="累计购进金额" />
     <el-table-column prop="amountGrowthRate" label="同比增长率" />
      <el-table-column prop="newProductAmount" label="新品购进" />
       <el-table-column prop="newProductGrowthRate" label="同比增长率" />
  </el-table>
        </div >
        <div v-if= "client=='KA连锁'">
      <el-table :data="tableData" style="width: 100%"     cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="客户类型"  />
    <el-table-column prop="customersQuantity" label="连锁客户数" />
    <el-table-column prop="storeQuantity" label="连锁门店数" />
     <el-table-column prop="totalAmount" label="累计购进金额" />
      <el-table-column prop="yearOnYearAmount" label="同比购进金额" />
       <el-table-column prop="growthRate" label="同比增长率" />
    </el-table>
          </div>
                  <div v-if= "client=='商业客户'">
      <el-table :data="tableData" style="width: 100%"     cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="渠道级别"  />
    <el-table-column prop="customersQuantity" label="商业客户数" />
    <el-table-column prop="terminalCustomersNumber" label="终端客户数" />
          <el-table-column prop="salesAmount" label="累计销售金额" />
     <el-table-column prop="salesGrowthRate" label="同比增长率" />
      <el-table-column prop="netSalesAmount" label="累计纯销金额" />
       <el-table-column prop="netSalesGrowthRate" label="同比增长率" />
    </el-table>
          </div>
                            <div v-if= "client=='铁架子客户'">
      <el-table :data="tableData" style="width: 100%"     cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="客户类型"  />
    <el-table-column prop="customersQuantity" label="铁架子客户数" />
    <el-table-column prop="salesAmount" label="铁架子销售金额" />
     <el-table-column prop="salesGrowthRate" label="同比增长率" />
      <el-table-column prop="netSalesAmount" label="铁架子纯销金额" />
       <el-table-column prop="netSalesGrowthRate" label="同比增长率" />
    </el-table>
          </div>
     <div v-if= "client=='中小连锁'">
      <el-table :data="tableData" style="width: 100%"     cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="客户类型"  />
    <el-table-column prop="customersQuantity" label="连锁客户数" />
    <el-table-column prop="chainStoresQuantity" label="连锁门店数" />
     <el-table-column prop="totalPurchaseAmount" label="累计购进金额" />
      <el-table-column prop="purchaseAmount" label="同比购进金额" />
       <el-table-column prop="growthRate" label="同比增长率" />
    </el-table>
          </div>
       </div>
</template>

<script>
export default {
          props:{
            client: { type: String, default: '' },
                tableData:{
          type:Array,
          default: ()=>{}
               }
          },
         data(){
             return{
                 headerStyle:{
                     'background':'#FFF8EC'
                 },
             }
         }
}
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#FFF8EC !important;
  height: 60px;
}
/deep/.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 15px;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
/deep/.el-table__row .cell-row{
    height: 60px !important;
}
/deep/.cell-row .cell{
      text-align: center;
    font-size: 15px;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
</style>